<template>
  <div class="ratings" ref="ratingsContent">
    <div class="ratings-content">
      <div class="overview">
          <div class="overview_left">
              <h1 class="foodScore">{{seller.foodScore}}</h1>
              <div class="title">综合平分</div>
              <div class="rankRate">高于周边商家{{seller.rankRate}}%</div>
          </div>
          <div class="overview_right">
              <div class="score_wrapper">
                  <span class="title">服务态度</span>
                  <star :size="36" :score="seller.score"></star>
                  <span class="score">{{seller.score}}</span>
              </div>
              <div class="score_wrapper">
                  <span class="title">商品评分</span>
                  <star :size="36" :score="seller.foodScore"></star>
                  <span class="score">{{seller.foodScore}}</span>
              </div>
              <div class="delivery_wrapper">
                  <span class="title">送达时间</span>
                  <span class="deliveryTime">{{seller.deliveryTime}}分钟</span>
              </div>
          </div>
      </div>
      <split></split>
      <ratingselect :ratings="ratings" :select-type="selectType" :only-content="onlyContent" :desc="desc" @filterRatings="filterRatings" @isContent="isContent"></ratingselect>
      <div class="ratings_wrapper">
          <ul>
              <li class="ratings_item" v-for="(ratingItem,index) in ratings" :key="index" v-show="needShowList(ratingItem.rateType,ratingItem.text)">
                  <div class="avatar">
                      <img :src="ratingItem.avatar" width="28" height="28">
                  </div>
                  <div class="content">
                      <div class="username">{{ratingItem.username}}</div>
                      <div class="star_wrapper">
                          <star :size="24" :score="ratingItem.score"></star>
                          <span class="deliveryTime" v-show="ratingItem.deliveryTime">{{ratingItem.deliveryTime}}分钟送达</span>
                      </div>
                      <p class="text">{{ratingItem.text}}</p>
                      <div class="recommend_wrapper">
                          <!-- <i class="icon-thumb_up"></i> -->
                           <i class="icon" :class="{'icon-thumb_up':ratingItem.rateType===0,'icon-thumb_down':ratingItem.rateType===1}"></i>
                          <span class="text" v-for="(recommendItem,index) in ratingItem.recommend" :key="index" v-show="ratingItem.recommend && ratingItem.recommend.length">{{recommendItem}}</span>
                      </div>
                      <div class="rating_time">{{ratingItem.rateTime | formatDate('yyyy-MM-dd hh:mm')}}</div>
                  </div>
              </li>
          </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import axios from "axios";
import star from "../../components/star/star";
import ratingselect from "../../components/ratingselect/ratingselect";
import split from "../../components/split/split";
import formatDate from "../../common/js/formatDate";
const ALL = 2;
// const POSITIVE = 0;
// const NEGATIVE = 1;
export default {
  data() {
    return {
      ratings: [],
      selectType: ALL, // 评论type按钮的样式，使用常量切换
      onlyContent: false, // 有内容的评论
      desc: {
        all: "全部",
        positive: "推荐",
        negative: "吐槽"
      }
    };
  },
  props: {
    seller: {
      type: Object
    }
  },
  created() {
    axios
      .get("/api/ratings/")
      .then(response => {
        if (response.data.errno === 0) {
          this.ratings = response.data.data;
            this.scroll = new BScroll(this.$refs.ratingsContent, {
            click: true
          });
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    isContent(onlyContent) {
      // 获取子组件点击事件传递过来的数据
      this.onlyContent = onlyContent;
      this.$nextTick(() => {
        this.scroll.refresh();
      });
    },
    filterRatings(type) {
      // 获取子组件点击事件传递过来的数据
      this.selectType = type;
      this.$nextTick(() => {
        this.scroll.refresh();
      });
    },
    needShowList(type, text) {
      // 筛选需要展示的评价
      if (this.onlyContent && !text) {
        // alert(11)
        // 只要有内容的评论
        return false;
      }
      if (this.selectType === ALL) {
        // 显示所有评论
        return true;
      } else {
        return this.selectType === type;
      }
    }
  },
  components: {
    star,
    ratingselect,
    split
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ratings {
  position: absolute;
  top: 174px;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.overview {
  display: flex;
  padding: 18px 0;
}
.overview_left {
  flex: 0 0 137px;
  padding-bottom: 6px;
  width: 137px;
  text-align: center;
  border-right: 1px solid rgba(7, 17, 27, 0.1);
}
@media only screen and (max-width: 320px) {
  /*适配320px以下小屏 */
  .overview_left {
    flex: 0 0 120px;
    width: 120px;
  }
}
.foodScore {
  font-size: 24px;
  color: rgb(255, 153, 0);
  line-height: 28px;
}
.overview_left .title {
  font-size: 12px;
  line-height: 12px;
  color: rgb(7, 17, 27);
  margin-bottom: 8px;
}
.rankRate {
  font-size: 10px;
  line-height: 10px;
  color: rgb(147, 153, 159);
}
.overview_right {
  flex: 1;
  padding: 6px 0 0 24px;
  font-size: 0;
}
@media only screen and (max-width: 320px) {
  /* 适配320px以下小屏 */
  .overview_right {
    padding: 6px;
  }
}
.score_wrapper {
  margin-bottom: 8px;
}
.overview_right .title {
  font-size: 12px;
  display: inline-block;
  line-height: 18px;
}
.overview_right .star {
  display: inline-block;
  margin: 0 12px;
  vertical-align: top;
}
@media only screen and (max-width: 320px) {
  /* //适配320px以下小屏 */
  .overview_right .star {
    margin: 0 6px;
  }
}
.score {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  color: rgb(255, 153, 0);
}
.delivery_wrapper {
  margin-bottom: 6px;
  font-size: 0;
}
.delivery_wrapper .title {
  font-size: 12px;
  line-height: 18px;
  padding-right: 12px;
}
.deliveryTime {
  font-size: 12px;
  line-height: 18px;
  color: rgb(147, 153, 159);
}
.ratings_wrapper .ratings_item {
  padding: 18px;
  display: flex;
}
.avatar {
  flex: 0 0 28px;
  width: 28px;
  margin-right: 12px;
}
.avatar img {
  border-radius: 50%;
}
.content {
  flex: 1;
  position: relative;
}
.username {
  padding-bottom: 8px;
  font-size: 10px;
  line-height: 12px;
  color: rgb(7, 17, 27);
}
.star_wrapper {
  font-size: 0;
  padding-bottom: 6px;
}
.star_wrapper .star {
  display: inline-block;
  vertical-align: top;
  margin-right: 6px;
}
.star_wrapper .deliveryTime {
  display: inline-block;
  vertical-align: top;
  font-size: 10px;
  font-weight: 200;
  line-height: 12px;
  color: rgb(147, 153, 159);
}
.text {
  font-size: 12px;
  line-height: 18px;
  color: rgb(7, 17, 27);
  padding-bottom: 8px;
}
.recommend_wrapper {
  width: 100%;
  font-size: 0;
}
.recommend_wrapper .icon {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  margin: 0 8px 6px 0;
}
.icon-thumb_up {
  color: rgb(0, 160, 220);
}
.icon-thumb_down {
  color: grey;
}

.recommend_wrapper .text {
  display: inline-block;
  width: 70px;
  box-sizing: border-box;
  margin-right: 8px;
  padding: 0 6px;
  border: 1px solid rgba(7, 17, 27, 0.1);
  border-radius: 1px;
  background: #fff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 16px;
  color: rgb(147, 153, 159);
}
.rating_time {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  font-size: 10px;
  font-weight: 200;
  line-height: 12px;
  color: rgb(147, 153, 159);
}
</style>